<template>
    <div>
        <nav-bar></nav-bar>


        <div class="main">

            <el-row>
                <el-col :span="20" :offset="2">
                    <el-tabs v-model="activeName" @tab-click="reset" style="min-height: 70vh;overflow:visible;">
                        <el-tab-pane label="学生注册" name="first">
                            <el-row>
                                <el-col :span="16" :offset="4">
                                    <Form ref="student" :saveContent="'注册'" :rules="studentForm.rules"
                                        :form="studentForm.form" :items="studentForm.items" :save="studentSave"></Form>
                                </el-col>
                            </el-row>

                        </el-tab-pane>
                        <el-tab-pane label="招聘单位注册" name="second">
                            <el-col :span="16" :offset="4">
                                <Form ref="company" :saveContent="'注册'" :rules="companyForm.rules"
                                    :form="companyForm.form" :items="companyForm.items" :save="companySave"></Form>
                            </el-col>

                        </el-tab-pane>

                    </el-tabs>

                </el-col>
            </el-row>

        </div>

        <Footer style="position:absolute; bottom: 0;"></Footer>
    </div>
</template>



<script>
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    import Footer from './common/footer.vue'
    import HomeIntro from "./common/homeIntro.vue"
    import navBar from "./common/navBar"
    import Form from "@/components/Form1.vue"
    export default {
        name: "Index",
        components: {
            Footer,
            HomeIntro,
            navBar,
            Form,
        },
        data() {
            let validatePwd1 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.studentForm.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            let validatePwd2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.companyForm.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }

            let validatePhone = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入手机号"));
                } else {
                    if (!/^1[3456789]\d{9}$/.test(value)) {
                        callback(new Error("请输入正确的手机号"));
                    } else {
                        callback();
                    }
                }
            }
            return {
                activeName: "first",
                studentForm: {
                    rules: {
                        name: [{
                            required: true,
                            message: '姓名不能为空'
                        }],
                        account: [{
                            required: true,
                            message: '账户不能为空'
                        }],
                        password: [{
                            required: true,
                            message: '密码不能为空'
                        }],
                        password2: [{
                                required: true,
                                message: '确认密码不能为空'
                            },
                            {
                                required: true,
                                validator: validatePwd1
                            }
                        ],
                        phone: [{
                            required: true,
                            validator: validatePhone
                        }],
                    },
                    form: {
                        name: '',
                        account: null,
                        password: '',
                        password2: '',
                        birthday: '',
                        college: '',
                        phone: '',
                    },
                    items: [{
                            type: 'text',
                            label: '姓名',
                            prop: 'name',
                            name: 'name',
                            placeholder: '请输入姓名'
                        },
                        {
                            type: 'text',
                            label: '账号',
                            prop: 'account',
                            name: 'account',
                            placeholder: '请输入账号'
                        },
                        {
                            type: 'password',
                            label: '密码',
                            prop: 'password',
                            name: 'password',
                            placeholder: '请输入密码'
                        },
                        {
                            type: 'password',
                            label: '确认密码',
                            prop: 'password2',
                            name: 'password2',
                            placeholder: '请输入确认密码'
                        },
                        {
                            type: 'text',
                            label: '手机号码',
                            prop: 'phone',
                            name: 'phone',
                            placeholder: '请输入手机号码'
                        },
                        {
                            type: 'date',
                            label: '出生日期',
                            prop: 'birthday',
                            name: 'birthday',
                            placeholder: '请选择出生日期'
                        },
                        {
                            type: 'text',
                            label: '毕业学校',
                            prop: 'college',
                            name: 'college',
                            placeholder: '请输入毕业学校'
                        },
                    ]
                },
                companyForm: {
                    rules: {
                        name: [{
                            required: true,
                            message: '名称不能为空'
                        }],
                        account: [{
                            required: true,
                            message: '账户不能为空'
                        }],
                        password: [{
                            required: true,
                            message: '密码不能为空'
                        }],
                        password2: [{
                                required: true,
                                message: '确认密码不能为空'
                            },
                            {
                                required: true,
                                validator: validatePwd2
                            }
                        ],
                        telephone: [{
                            required: true,
                            validator: validatePhone
                        }],
                    },
                    form: {
                        name: '',
                        account: null,
                        password: '',
                        password2: '',
                        contact: '',
                        telephone: '',
                    },
                    items: [{
                            type: 'text',
                            label: '单位名称',
                            prop: 'name',
                            name: 'name',
                            placeholder: '请输入单位名称'
                        },
                        {
                            type: 'text',
                            label: '账号',
                            prop: 'account',
                            name: 'account',
                            placeholder: '请输入账号'
                        },
                        {
                            type: 'password',
                            label: '密码',
                            prop: 'password',
                            name: 'password',
                            placeholder: '请输入密码'
                        },
                        {
                            type: 'password',
                            label: '确认密码',
                            prop: 'password2',
                            name: 'password2',
                            placeholder: '请输入确认密码'
                        },
                        {
                            type: 'text',
                            label: '联系人',
                            prop: 'contact',
                            name: 'contact',
                            placeholder: '请输入联系人'
                        },
                        {
                            type: 'text',
                            label: '联系电话',
                            prop: 'telephone',
                            name: 'telephone',
                            placeholder: '请输入联系电话'
                        },
                    ]
                },
            }
        },
        mounted() {

        },
        methods: {
            reset() {
                this.studentForm.form = {
                    name: '',
                    account: null,
                    password: '',
                    password2: '',
                    birthday: '',
                    college: '',
                    phone: '',
                }
                this.companyForm.form = {
                    name: '',
                    account: null,
                    password: '',
                    password2: '',
                    contact: '',
                    telephone: '',
                }
                console.log(this.$refs['student'].resetForm());
                this.$refs["student"].resetForm();
                this.$refs["company"].resetForm();
            },
            studentSave() {

                let flag = this.$refs['student'].validateForm();
                console.log("学生注册", flag);
                if (flag) {
                    let param = this.studentForm.form;
                    this.postRequest("/front/reg/student_create", {
                        ...param
                    }).then(res => {
                        if (res) {
                            this.$message.success(res.message)
                            this.reset()
                        }
                    })
                }
            },
            companySave() {
                let flag = this.$refs['company'].validateForm();
                console.log("招聘单位注册", flag);
                if (flag) {
                    let param = this.companyForm.form;
                    this.postRequest("/front/reg/company_create", {
                        ...param
                    }).then(res => {
                        if (res) {
                            this.$message.success(res.message)
                            this.reset()
                        }
                    })

                }
            },

        },
    }
</script>
<style lang="scss" scoped>
    * {
        box-sizing: border-box;

    }

    a {
        text-decoration: none;
        color: #333;
    }

    *::before,
    *.after {
        box-sizing: border-box;
    }

    nav.navbar {
        transition: backgroundColor .5s;
        position: fixed;
        width: 100%;
        margin: 0 auto;
        top: 0;
        z-index: 3;
        background-color: #3e70a1;

        .navbar-brand {
            padding: 0 10vw;
            color: #fff
        }

        .navbar-collapse {
            padding-left: 20vw;

            ul li {
                margin: 0 1vw;

                a {
                    transition: all .5s;
                    color: #fff;
                }
            }


            ul li a:hover {
                transform: scale(1.2);
                background-color: #fff;
                border-radius: 5%;
                color: #3e70a1;
            }


        }

    }

    .main {
        margin: auto;
        width: 1200px;
        margin-top: 20px;
    }
</style>